<template>
  <el-dialog
    :title="$t('app.approvalTitle')"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="680px"
    append-to-body
    @close="emit('pushCloseDialog')"
  >
    <el-form ref="postFormRef" :model="postFormData" label-width="180px">
      <el-form-item
        prop="checkedInfo"
        :label="$t('app.approvalLabel')"
        :rules="[
          {
            required: true,
            message: $t('app.approvalPlaceholder'),
            trigger: 'blur',
          },
        ]"
      >
        <el-input
          v-model="postFormData.checkedInfo"
          type="textarea"
          resize="none"
          :rows="3"
          :placeholder="$t('app.approvalPlaceholder')"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="danger" :loading="refundLoading" @click="refundHandler">
        {{ $t("app.approvalRefundBtnText") }}
      </el-button>
      <el-button type="success" :loading="passLoading" @click="passHandler">
        {{ $t("app.approvalPassBtnText") }}
      </el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, unref, watch } from "vue";
const emit = defineEmits(["pushCloseDialog", "pushEnd"]);
const postFormData: any = ref({}),
  dialogVisible = ref(false),
  refundLoading = ref(false),
  passLoading = ref(false),
  postFormRef = ref<null | HTMLElement>(null);

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
watch(
  () => props.visible,
  (val) => {
    if (val) {
      init();
    }
    dialogVisible.value = val;
  },
  { deep: true }
);
const init = () => {
  refundLoading.value = false;
  passLoading.value = false;
  postFormData.value = Object.assign({}, { checkedInfo: "" });
};
const refundHandler = async () => {
  const postFormDom: any = unref(postFormRef);
  await postFormDom.validate();
  refundLoading.value = true;
  emit("pushEnd", {
    type: 0,
    checkedInfo: postFormData.value.checkedInfo,
  });
};
const passHandler = () => {
  passLoading.value = true;
  emit("pushEnd", {
    type: 1,
    checkedInfo: postFormData.value.checkedInfo,
  });
};
</script>
